<template>
  <div class="inform-hd-risk">
    <div id="myChart" :style="{width: '362px', height: '300px'}"></div>
  </div>
</template>
<script>
  // 引入基本模板
  let echarts = require('echarts/lib/echarts')
  // 引入柱状图组件
  require('echarts/lib/chart/bar')
  require('echarts/lib/chart/line')
  // 引入提示框和title组件
  require('echarts/lib/component/tooltip')
  require('echarts/lib/component/title')
  export default {
    data() {
      return {}
    },
    mounted() {
      this.drawLine();
    },
    methods: {
      drawLine() {
        // 基于准备好的dom，初始化echarts实例
        let myChart = this.$echarts.init(document.getElementById('myChart'))
        // 绘制图表
        myChart.setOption({
          tooltip: {
            trigger: 'axis'
          },
          legend: {
            data: ['订单准确率', '排程准确率'],
            x: 'left'
          },
          grid: {
            left: '2%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          toolbox: {
            show: true,
            feature: {
              dataView: {
                readOnly: false
              },
              magicType: {
                type: ['line', 'bar']
              },
              restore: {},
              saveAsImage: {}
            }
          },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            data: ['第12周', '第13周', '第14周', '第15周', '第16周', '第17周', '第18周', '当前周']
          },
          yAxis: {
            type: 'value'
          },
          series: [{
              name: '订单准确率',
              type: 'line',
              stack: '总量',
              data: [120, 132, 101, 134, 90, 230, 210, 80]
            },
            {
              name: '排程准确率',
              type: 'line',
              stack: '总量',
              data: [220, 182, 191, 234, 290, 330, 310, 70]
            }
          ]
        });
      }
    }
  }

</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>


</style>
